<template>

	<div class="questions-body">

		<div class="questions-view">

		</div>

		<div class="more-recommend category" v-if="questions">

			<div class="article">

				<div class="active-title">

					<p class="article-title"> {{englishTitle}}</p>
					<p v-if="chinese_flag" class="article-title"> {{title}} </p>
					<p></p>
					<p class="article-message">
						来源：
						<span v-if="questions.statute">
							<a :href="'/statute?q='+item.id" class="source ellipsis" v-for="(item,index) in questions.statute.data" :key="index">
								<Tag>{{item.name_short}}</Tag>
							</a>
						</span>
						
						<Tag v-else>暂无来源</Tag>
						<a href="javascript:;" class="checkChinese" @click="showChinese">查看中文</a>
						<br />
						<span> {{inTimes}}</span>
					</p>
				</div>
				<p class="article-content" v-html="englishContent"></p>
				<p v-if="chinese_flag" class="article-content" v-html="chineseContent"></p>
			</div>
		</div>
		<div style="text-align: right;">
			<router-link style="background:#fff;font-size:14px;color:#2d8cf0;" class="term-herf" :to="{path: '/questions'}">返回</router-link>
		</div>
		<Modal
	        title="查看中文"
	        v-model="tipsBuyCard"
	        @on-ok="doPayGold"
	        >
	        <p>查看中文需要会员卡哦，开通会员后享受更多的优惠！</p>
	    </Modal>

	</div>
</template>
<script>
import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
				chineseContent: '',
				englishContent: '',
				title: '',
				inTimes: '',
				questions: {},
				chinese_flag:false,
				tipsBuyCard:false,
				englishTitle:'',
			}
		},
		computed:{
		    ...mapGetters(['member'])
		 },
		mounted() {
			this.getCarousel();
		},
		methods: {
			getCarousel(back) {
				let query = {
					include:'statute',
					fe:1,
				}
				if(back){
					query.back = true;
				}
				this.$http.get('/questions/' + this.$route.query.id,{
					params:query
				})
				.then(questionslist => {
					this.chineseContent = questionslist.data.data.content;
					this.englishContent = questionslist.data.data.english_content;

					this.englishTitle = questionslist.data.data.english_title;
					this.title = questionslist.data.data.title;
					if(this.title =="" || this.title == null){
						this.chinese_flag = true;
					}
					this.inTimes = questionslist.data.data.inTimes;
					this.questions = questionslist.data.data;
				}).catch(err => {
					this.$Notice.open({
						title: err.response.data.message,
					})
					// this.$Message.error(err.response.data.message);
				})
			},
			goRouter(id){
		      	this.$router.push({path:'/statute',query:{q:id}})
		    },
		    //点击查看中文
		    showChinese(){
				if(this.title =="" || this.title == null){
					this.$Notice.error({
						title: '暂无中文'
					});
					return;
				}
				if(this.member.id){
					if(this.questions.gold == 0){
						this.chinese_flag = true;
						this.getCarousel(true);
					}else{
						if(!this.member.questions){
							this.tipsBuyCard = true;
						}else{
							this.chinese_flag = true;
							this.getCarousel(true);
						}
					}
				}else{
					this.$store.dispatch('login',true);
				}
		    },
		    doPayGold(){
				this.routeLink('/personal?name=card');
		    },

		}
	}
</script>
<style scoped>
	.questions-body {
		max-width: 1200px;
		background: #fff;
		margin: 0 auto;
		padding:0 20px 42px;
	}
	.top-tis {
		margin-left: 12px;
		height: 42px;
		line-height: 42px;
		border-bottom: 1px solid #eee;
	}
	.questions-view {
		margin: 24px auto;
	}
	.questions-ul {
		border-bottom: 1px solid #ddd;
	}
	.questions-li {
		height: auto;
		line-height: 42px;
		padding: 10px 0;
	}
	.article {
		width: 90%;
		margin: 12px auto;
	}
	/*文章UI*/
	.article {
		width: 100%;
		margin: 12px auto;
	}

	.article p {
		line-height: 28px;
	}

	.article-title {
		font-size: 16px;
		text-align: center;
	}

	.article-message {
		width: 100%;
		height: auto;
		line-height: 56px;
		text-align: center;
	}

	.article-message {
		color: #999;
		font-size: 14px;
		border-bottom: 1px solid #eee;
	}

	.article-content {
		text-indent: 2em;
		font-size: 16px;
		line-height: 42px;
	}

	.term-herf {
		padding-right: 20px;
		font-size: 14px;
		right: 60px;
	}
	.checkChinese{
		margin:0 auto;
		padding:8px 10px;
		width:100px;
		color: #15ccac;
		border-radius: 4px;
		border:1px solid #15ccac;
		text-align: center;
	}
	.source{
		max-width:150px;
	}
	@media (max-width:1024px){
    .questions-body{width:100%;}
    .article-title{font-size: 14px;line-height: 24px;font-weight: 700;}
    .article p{line-height: 28px;}
    .article-content{
    	padding: 0 30px;
    }
  }
</style>